<template>
  <view>
    <view class="user-box">
      <view class="user-icon">
        <view class="icon">
          <image style="width: 200rpx;" mode="widthFix" src="../../static/app.png"></image>
        </view>
        <view style="color: white;font-weight: 900;text-align: center;margin-top: 10rpx;">{{userInfo.nickName}}</view>
      </view>
      <view class="user-title">
        <view class="item">
          <view>8</view>
          <view>收藏的店铺</view>
        </view>
        <view class="item">
          <view>14</view>
          <view>收藏的商品</view>
        </view>
        <view class="item">
          <view>18</view>
          <view>关注的商品</view>
        </view>
        <view class="item">
          <view>84</view>
          <view>足迹</view>
        </view>
      </view>
      <view class="user-order">
        <view class="title">我的订单</view>
        <view class="icon">
          <view>
            <view>
              <image style="width: 60rpx;" mode="widthFix" src="../../static/my-icons/icon1.png"></image>
            </view>
            <view>待付款</view>
          </view>
          <view>
            <view>
              <image style="width: 60rpx;" mode="widthFix" src="../../static/my-icons/icon2.png"></image>
            </view>
            <view>待收货</view>
          </view>
          <view>
            <view>
              <image style="width: 60rpx;" mode="widthFix" src="../../static/my-icons/icon3.png"></image>
            </view>
            <view>退款/退货</view>
          </view>
          <view>
            <view>
              <image style="width: 60rpx;" mode="widthFix" src="../../static/my-icons/icon4.png"></image>
            </view>
            <view>全部订单</view>
          </view>
        </view>
      </view>
      <view class="user-action">
        <view class="item">
          <view>收获地址</view>
          <view><uni-icons type="forward" size="20"></uni-icons></view>
        </view>
        <view class="item">
          <view>联系客服</view>
          <view><uni-icons type="forward" size="20"></uni-icons></view>
        </view>
        <view class="item" @click="exit">
          <view>退出登录</view>
          <view><uni-icons type="forward" size="20"></uni-icons></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-userInfo",
    data() {
      return {
        userInfo: this.$store.state.token.userInfo
      };
    },
    methods: {
      exit() {
        const vm = this
        uni.showModal({
          title: "提示",
          content: "确定要退出登录吗？",
          success: function(res) {
            if (res.confirm) {
              uni.removeStorageSync("token")
              vm.$store.commit('clearToken')
            } else if (res.cancel) {
              uni.$showMsg("取消退出")
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .user-box {
    .user-icon {
      background-color: #55aaff;
      width: 100%;
      height: 350rpx;
      padding-top: 100rpx;

      .icon {
        margin: 0 auto;
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
        background-color: white;
        overflow: hidden;
        border: 3px solid white;
      }
    }

    .user-title {
      margin: 0 auto;
      margin-top: -30rpx;
      width: 90%;
      height: 100rpx;
      background-color: white;
      display: flex;
      justify-content: space-evenly;

      .item {
        text-align: center;
        font-size: 12px;
        margin-top: 20rpx;
      }
    }

    .user-order {
      background-color: white;
      padding: 20rpx;
      margin-top: 20rpx;

      .title {
        padding-bottom: 25rpx;
        border-bottom: 1px solid #eee
      }

      .icon {
        margin-top: 25rpx;
        display: flex;
        justify-content: space-around;
        font-size: 14px;
        text-align: center;

      }
    }

    .user-action {
      margin-top: 20rpx;
      background-color: white;

      .item {
        display: flex;
        justify-content: space-between;
        height: 90rpx;
        line-height: 100rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
      }
    }
  }
</style>